<script setup lang="ts">
  import ComponentPreview from '@/components/ComponentPreview.vue';
  import ComponentCanvas from '@/components/ComponentCanvas.vue';
  import ComponentConfig from '@/components/ComponentConfig.vue';
  import { useLowcodeStore } from '@/store/features/lowcode';
  import { storeToRefs } from 'pinia';

  const lowcodeStore = useLowcodeStore();
  const { canvasComponents } = storeToRefs(lowcodeStore);

  // 保存
  const saveProject = () => {
    const projectData = {
      components: canvasComponents.value,
    };
    localStorage.setItem('lowcode-project', JSON.stringify(projectData));
    alert('保存成功');
  };
  // 预览
  const previewProject = () => {
    window.open('/preview', '_blank');
  };
</script>
<template>
  <div class="lowcode-editor">
    <div class="editor-header">
      <h2>低代码平台编辑器</h2>
      <div class="editor-actions">
        <button @click="saveProject">保存</button>
        <button @click="previewProject">预览</button>
      </div>
    </div>
    <div class="editor-content">
      <!-- 左侧组件预览区 -->
      <ComponentPreview />
      <!-- 中间画布区 -->
      <ComponentCanvas />
      <!-- 右侧配置区 -->
      <ComponentConfig />
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .lowcode-editor {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .editor-header {
      height: 60px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e7eb;
      .editor-actions {
        button {
          margin-left: 10px;
          padding: 8px 16px;
          background-color: #409eff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
    .editor-content {
      flex: 1;
      display: flex;
      height: calc(100vh - 60px);
    }
  }
</style>
